<template>
  <div class="info-main">
    <el-row>
      <el-col :span="8">
        <el-card>
          <el-descriptions title="基本信息" :column="1" border>
            <el-descriptions-item v-for="item in descList" :key="item.name" :label="item.title">
              <template v-if="item.type == 'img'">
                <image-preview :src="downloadFile(userInfo[item.value])" width="40%" height="40%" />
              </template>
              <template v-else>{{ 'prefix' in item ? item.prefix : '' }}{{ userInfo[item.value] }}{{ 'suffix' in item ? item.suffix : '' }}</template>
            </el-descriptions-item>
          </el-descriptions>
        </el-card></el-col
      >
      <el-col :span="16">
        <el-card>
          <el-calendar class="calendar" v-model="calendar"> </el-calendar>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { downloadFile } from '@/utils/file'
import { mapGetters } from 'vuex'
import ImagePreview from '@/components/ImagePreview'
export default {
  components: {
    ImagePreview,
  },
  data() {
    return {
      calendar: new Date(),
      descList: [
        {
          title: '头像',
          value: 'avatar',
          type: 'img',
        },
        {
          title: '用户名',
          value: 'username',
        },
        {
          title: '性别',
          value: 'sexName',
        },
        {
          title: '年龄',
          value: 'age',
          suffix: '岁',
        },
        {
          title: '角色',
          value: 'roleName',
        },
        {
          title: '手机号',
          value: 'phone',
        },
        {
          title: '邮箱',
          value: 'email',
        },
        {
          title: '地址',
          value: 'address',
        },
        {
          title: 'QQ',
          value: 'qq',
        },
        {
          title: '微信',
          value: 'wechat',
        },
        {
          title: '创建时间',
          value: 'createTime',
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {},
  methods: {
    downloadFile,
  },
}
</script>

<style lang="scss" scoped>
.info-main {
  .el-card {
    height: 87vh;
    overflow: auto;
  }
  .calendar {
    height: 87vh;
  }
}
</style>
